
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<style type="text/css">
    /*    html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }*/

    #map_canvas { width:320px;
                  height: 240px ;
                  position:absolute;
    }
    .row-map {
        width: 320px;height: 240px ;
        border:1px solid lightgray;
    }

</style>
<script type="text/javascript">

    //ROADMAP displays the normal, default 2D tiles of Google Maps.
    //SATELLITE displays photographic tiles.
    //HYBRID displays a mix of photographic tiles and a tile layer for prominent features (roads, city names).
    //TERRAIN displays physical relief tiles for displaying elevation and water features (mountains, rivers, etc.).

    var geocoder;
    var map;

    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(45.631506, 5.896236);
        var myOptions = { // 2.9855368999999428
            zoom: 16,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var canvas = $("#map_canvas").get(0);
        //canvas = document.getElementById("map_canvas");

        map = new google.maps.Map( canvas, myOptions);
    }


    function codeAddress() {
        var address = document.getElementById("address").value;
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }

  


    $(document).ready(initialize);

</script>

<div class="row row-map">
    <div id="map_canvas"></div>

</div>
<div>
    <input id="address" type="textbox" value="577 rue centrale, voglans, FR">
    <input type="button" value="Encode" onclick="codeAddress()">
</div>